<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : fixed</title>
        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .wrapper { height: 300px ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #fffe8f; }


            .tool-bar {
                /* 相对于 浏览器窗口 进行定位 */
                position: fixed ; /* 位置固定 */
                right: 100px ; /* 元素右侧边缘距离浏览器右侧边缘的偏移量 ( 正数向左、负数向右 ) */
                bottom: 30px ; /* 元素底边边缘距离浏览器底边边缘的偏移量 ( 正数向上、负数向下 ) */
                border: 1px solid blue ;
                height: 200px ;
                width: 80px ; /* 当元素采用 fixed 定位时那么宽度默认不是100%而是零(因此需要显式设置) */
                background-color: rgba( 255 , 255 , 255 , 0.75 ) ;
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="tool-bar"></div>

    </body>
</html>